<template>
    <div class="user-list">
    <el-table :data="tableData" style="width: 100% " >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column property="id" lable="id" width="80" />
        <el-table-column property="username" label="姓名" width="80" />
        <el-table-column property="phonenumber" label="电话号码" width="140" />
        <el-table-column property="player" label="角色" width="100" />
        <el-table-column property="manager" label="上级人员" width="100" />
        <el-table-column property="land" label="负责地块" width="200" />
        <el-table-column property="time" label="登录系统时间" width="120" />
        <el-table-column label="设置">
            <template #default="{ row }">
                <div class="btns">
                    <el-button size="small" type="primary" plain @click="emits('check',row)">查看</el-button>
                    <el-button size="small" type="danger" plain @click="emits('edit', row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="emits('remove', row.id)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>



<script lang='ts' setup>
const props = defineProps(["tableData"])
const emits = defineEmits(["edit", "remove","check"])

</script>

<style lang='scss' scoped>
// 去除表格默认间距
::v-deep .el-table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
}
::v-deep .el-table th,
::v-deep .el-table td {
    padding: 0 !important;
    margin: 0 !important;
}
// 表头 label 背景色为 darkcyan
::v-deep .el-table__header th {
    background: rgb(29, 74, 86);
    color: #bbb;
    font-size: 11px;
}
// 所有按钮统一为 darkcyan 背景，白色字体
::v-deep .btns .el-button {
    background:rgb(30,77,88) !important;
    border-color: rgb(30,77,88) !important;
}
::v-deep .btns .el-button span {
    color: rgb(55,146,157) !important;
    font-weight: 500;
}
::v-deep .el-table .el-table__body tr {
    background-color: rgba(15,38,52);
    height: 56px;
}
::v-deep .el-table .el-table__body td {
    color:#bbb;
    height: 56px;
    vertical-align: middle;
    font-size: 11px;
}
.user-list {
    width: 96%;
    height: 100%;
    background-color: rgba(15,38,52);
    padding: 10px;
    border-radius: 8px;
}
::v-deep .btns {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 56px;
    font-size: 13px;
}
</style>